<template>
	<view class="container">
		<u-navbar :background="{ background: '#6EC9E1' }" :is-fixed="true" :z-index='999' :border-bottom="false"
			:customBack='true' @leftEvent="leftEvent" back-icon-color="#FFF">
		</u-navbar>

		<view class="main">
			<view class="title">
				<!-- <text>{{info.status_text||''}}</text> -->
				<view class="fts2">问卷编号 ：{{info.sn||''}}</view>
			</view>
			<view class="card"
				@click="goTo( user.job==2 ?'/sub/center/mine/userInfo?id='+info.user_id :'/sub/center/mine/userInfo?id='+info.doctor_id  )">
				<view class="left">
					<u-avatar :size='96' bg-color='#eee' mode="square"
						:src="user.job==1 ?info.doctor_info.avatar:info.user_info.avatar"></u-avatar>
					<view class="docker">
						<p>{{user.job==1 ?info.doctor_info.username : info.user_info.username }}</p>
						<view class="member">
							<span class="icn"></span>
							<span>{{info.member_info.username||''}}</span>
							<span>{{info.member_info.gender_text||''}}</span>
							<span>{{info.member_info.age}}</span>
						</view>

					</view>
				</view>
				<view class="right">
					<u-icon name="arrow-right" color="#3e3e3e" size="24"></u-icon>
				</view>
			</view>

			<view class="topic" v-if="info.types==2">
				<view @click="select(index)" :class="index==t_index?'select':''" class="t-item"
					v-for="(itm,index) in topbar" :key="index">
					<span>{{itm.title||'-'}}</span>
				</view>
			</view>

			<view class="content">
				<!--  -->
				<view class="card from" v-if="t_index==topbar.length-1 ">

					<u-form label-position='top' :label-style="{'font-size': '13px','color':'#999999'}">
						<u-form-item label="基本资料">
							{{info.member_info.username||'-'}}
						</u-form-item>
						<u-form-item label="身高体重">
							{{info.member_info.height||''}}-{{info.member_info.weight||''}}-{{info.member_info.bmi||''}}
						</u-form-item>
						<u-form-item :border-bottom='false' label="学历">
							{{info.member_info.education_text||'-'}}
						</u-form-item>
					</u-form>

				</view>
				<!--  -->
				<view class="card from" v-if="t_index>0 && t_index< topbar.length-1">
					<u-form label-position='top' :label-style="{'font-size': '13px','color':'#999999'}">
						<u-form-item :border-bottom='index!=info.content[t_index-1].detail.length-1'
							v-for="(item,index) in info.content[t_index-1].detail" :label="item.title">
							<u-input disabled v-model="item.value" />
							<view class="_img">
								<u-image @click="imagePrivew(src)" :width='120' :height='120' :border-radius='10'
									v-for="src in item.images" :src="src">
									<u-loading slot="loading"></u-loading>
									<view slot="error" style="font-size: 24rpx;">加载失败</view>
								</u-image>
							</view>
						</u-form-item>
					</u-form>
				</view>
				<!-- 综合 -->
				<view class="card from" v-if="t_index==0 ">
					<view class="z-s">
						<p class="label">一般项目</p>
						<view class="item">
							{{info.member_info.username?info.member_info.username+'，':''}}
							{{info.member_info.gender_text?info.member_info.gender_text+'，':''}}
							{{info.member_info.age?info.member_info.age+'，':''}}
							{{info.member_info.height?info.member_info.height+'cm，':''}}
							{{info.member_info.weight?info.member_info.weight+'kg，':''}}
							{{info.member_info.bmi?'BMI'+info.member_info.bmi+'，':''}}
							{{info.member_info.education_text||''}}
						</view>
					</view>
				</view>
				<view class="card from" v-if="t_index==0 && info.types==2">
					<view class="z-s">
						<p class="label">基本信息</p>
						<view class="item">
							<view class="i-v" :class="item.type>2?'i-f':''"
								v-for="(item,index) in info.content[0].detail">
								<span class="label">{{num+index}}.{{item.title}}</span>
								{{item.value||''}}
							</view>
						</view>
					</view>
				</view>
				<view class="card from" v-if="t_index==0 && info.types==2 ">
					<view class="z-s">
						<p class="label">现有问题</p>
						<view class="item">
							<view class="i-v" :class="item.type>2?'i-f':''"
								v-for="(item,index) in info.content[1].detail">
								<span class="label">{{num+index}}.{{item.title}}</span>
								{{item.value||''}}
								<view class="_img">
									<u-image @click="imagePrivew(src)" :width='120' :height='120' :border-radius='10'
										v-for="src in item.images" :src="src">
										<u-loading slot="loading"></u-loading>
										<view slot="error" style="font-size: 24rpx;">加载失败</view>
									</u-image>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="card from" v-if="t_index==0 && info.types==1 ">
					<view class="z-s">
						<view>
							<view class="i-v" :class="item.type>2?'i-f':''" v-for="(item,index) in info.content">
								<span class="label">{{num+index}}.{{item.title}}</span>
								{{item.value||''}}
								<view class="_img">
									<u-image @click="imagePrivew(src)" :width='120' :height='120' :border-radius='10'
										v-for="src in item.images" :src="src">
										<u-loading slot="loading"></u-loading>
										<view slot="error" style="font-size: 24rpx;">加载失败</view>
									</u-image>
								</view>
							</view>
						</view>
					</view>
				</view>


				<view v-if="info.status==1 || user.job==2">
					<u-form v-if="t_index==0">
						<view class="label" style="margin-top: 30rpx;">参考意见</view>
						<view class="card yijian">
							<text>初步认定问题</text>
							<u-line margin="20rpx 0 0 0 " />
							<u-form-item :border-bottom='false'>
								<u-input :disabled="show" :maxlength='200' type="textarea" placeholder="未填写认定问题"
									v-model="form.result" />
								<p style="text-align: end;">{{form.result.length || 0 }}/200</p>
							</u-form-item>
						</view>
						<view class="card yijian" v-if="!show || form.drug.length>0">
							<text>处理方法</text>
							<u-line margin="20rpx 0 " />
							<span v-if="info.status==2" style="opacity: 0.6;">用户已取消咨询</span>
							<view v-show="info.status!=2" class="content " v-for="(itm,index) in form.drug"
								:key="index">
								<view class="lable c-i">
									<span>{{itm.title}}</span>
									<image v-show="!show && info.status==0" @click="del(index)"
										src="@/static/icon/del2.png"></image>
								</view>
								<u-form-item>
									<u-input :disabled="show" :custom-style="{color:'#6EC9E1','font-size':'14px'}"
										:border-bottom='true' :maxlength='200' placeholder="用法" v-model="itm.remark" />
								</u-form-item>
							</view>

							<view v-show="!show && info.status==0" class="label"
								style="text-align: center;margin-top: 20rpx;"
								@click="goTo('/sub/prescription/medication')">+ 添加</view>
						</view>
						<view class="card yijian" v-if="title">
							<text>注意事项</text>
							<u-line margin="20rpx 0 0 0 " />
							<u-form-item :border-bottom='false'>
								<u-input :disabled="show" :maxlength='200' type="textarea" :placeholder="title"
									v-model="form.tell" />
								<view v-show="!show && info.status==0" class="label"
									style="text-align: center;margin-top: 20rpx;"
									@click="goTo('/sub/center/mine/note?c=1')">+ 添加笔记</view>
							</u-form-item>
						</view>
					</u-form>
				</view>
				<!--  -->
				<view class="card questionnaire">
					<text>问卷信息</text>
					<view>
						<span>问卷编号：</span>
						<span>{{info.sn}}</span>
					</view>
					<view>
						<span>创建时间：</span>
						<span>{{info.createtime}}</span>
					</view>
				</view>
			</view>

			<view class="btn" @click="save" v-if="t_index==0 && user.job==2 && info.status==0 ">{{!show?'预览':'提交，结束对话'}}
			</view>
			<view v-else class="bto">
				<view class="button">
					<!-- 			<span @click="goTo('/sub/prescription/index?id='+info.prescription_id)" v-if="info.status>0">查看处理方法</span>
					<span @click="goTo('/sub/prescription/prescribing?id='+info.id)" v-if="info.status==0 && user.job==2">开处方</span> -->
					<span @click="tochat(info.user_id)" v-if="user.job==2">联系用户</span>
					<span @click="tochat(info.doctor_id)" v-if="user.job==1">联系护航员</span>
				</view>
			</view>
		</view>

		<!-- 提示 -->
		<u-modal v-model="showModal" :content="content" @confirm="submit" :show-cancel-button='true'
			:mask-close-able="true"></u-modal>
		<u-toast ref="uToast" />
		<!-- 提示 -->
		<view class="dsc_remake">
			<p>温馨提示：</p>
			<p>面谈，才有更精准意见。</p>
			<p>未见面，资料搜集不全面，意见粗糙，仅供参考、对比。</p>
			<p class="u-m-t-20">生活咨询探讨，专业人士尽自己所能，线上把自己知道的专业知识，分享给大家。</p>
		</view>
	</view>
</template>

<script>
	import {
		zixunDetail,
		chat,
		noteDetail,
		prescriptionDetail,
		prescription
	} from '@/api/index.js'
	export default {
		data() {
			return {
				info: {},
				user: {},
				t_index: 0,
				topbar: [],
				form: {
					result: '',
					tell: '',
					drug: []
				},
				show: false,
				showModal: false,
				content: '是否确认无误?',
				num: 1,
				title: '生活宣教、日常关心，赢得更多信赖。桃李不言，下自成蹊'
			}
		},
		watch: {
			t_index(newdata) {
				if (newdata != this.topbar.length - 1) {
					this.show = false
				}
			}
		},
		onLoad(e) {
			this.user = this.ws.getUserInfo()
			if (this.user.job == 1) {
				this.show = true
				this.title = ''
			}
			this.init(e.id)
			this.form.advice_id = e.id;

		},
		methods: {
			leftEvent() {
				console.log(1);
				if (this.show) {
					this.show = !this.show
				} else {
					uni.navigateBack()
				}
			},
			init(id) {
				let that = this
				zixunDetail({
					'id': id
				}).then(res => {
					if (res.code == 1) {
						that.info = res.data.detail

						if (that.info.types == 2) {
							that.topbar.push({
								title: '综合'
							})
							that.info.content.forEach(item => {
								that.topbar.push({
									title: item.title
								});
							})
							that.topbar.push({
								title: '一般项目'
							})
						} else {
							that.t_index = 0
						}


						if (that.info.prescription_id) {
							that.proscription(that.info.prescription_id)
						}
					} else {
						that.$refs.uToast.show({
							title: res.msg
						})
					}
				})

			},
			// 处方详情
			proscription(id) {
				let that = this
				prescriptionDetail({
					'id': id
				}).then(res => {
					if (res.code == 1) {
						// console.log();
						that.form = {
							...res.data.detail
						}
					} else {
						that.$refs.uToast.show({
							title: res.msg
						})
					}
				})
			},

			select(idx) {
				this.t_index = idx
			},
			goTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			tochat(id) {
				let that = this
				chat({
					'user_id': id
				}).then(res => {
					if (res.code == 1) {
						that.ws.tochat(res.data.session_id)
					}
				})
			},
			imagePrivew(src) {
				uni.previewImage({
					urls: [src],
				})
			},
			medication(e) {
				let obj = {
					"drug_id": e.id,
					"title": e.title
				}

				this.form.drug.push(obj)
				this.$forceUpdate()
			},
			note(e) {
				let that = this
				noteDetail({
					id: e
				}).then(res => {
					if (res.code == 1) {
						if (!that.form.tell) {
							that.form.tell = res.data.detail.content
						} else {
							that.form.tell = that.form.tell + ' ,' + res.data.detail.content
						}
					} else {
						uni.showToast({
							title: res.msg,
						})
					}
				})
				that.$forceUpdate()
			},
			del(index) {
				this.form.drug.splice(index, 1)
			},
			save() {
				if (this.show) {
					this.showModal = true
				} else {
					this.show = true
				}
			},
			submit() {
				let that = this
				prescription(that.form).then(res => {
					that.$refs.uToast.show({
						title: res.msg
					})
					if (res.code == 1) {
						// that.init(that.info.id)
						// this.show = false
						let pages = getCurrentPages()
						let page = pages[pages.length - 2]
						page.$vm.status = 0
						uni.navigateBack()
					}
				})
			},
		}

	}
</script>

<style lang="less">
	.dsc_remake {
		margin-top: 20rpx;
		color: #ff5500;
		font-size: 14px;
	}

	.container {
		background: url('@/static/img/mine/header-bg.png');
		background-size: 100% 30vh;
		background-repeat: no-repeat;
		background-color: #EEE;
		min-height: 100vh;
		position: relative;
		line-height: 25px;
		padding: 30rpx;

		u-form {
			width: 100%;

		}

		.main {

			.fts2 {
				font-size: 13px;
				opacity: 0.8;
			}

			.docker {
				margin-left: 16rpx;
			}

			.left {
				display: flex;
				align-items: center;

				.member {
					display: flex;
					align-items: center;
					opacity: 0.7;
					font-size: 13px;

					span {
						margin-right: 20rpx;
					}

					.icn {
						display: block;
						background-color: #4b4b4b;
						border-radius: 50%;
						height: 10rpx;
						width: 10rpx;
					}
				}
			}

			.title {
				color: #FFF;
				text-align: center;

				text {
					font-size: 24px;
				}

				view {
					margin-top: 10rpx;
					margin-bottom: 30px;
				}

			}

			.topic {
				display: flex;
				justify-content: space-between;
				margin: 20rpx 0;
				color: #3D3D3D;
				font-size: 15px;

				.t-item {
					text-align: center;
					padding: 16rpx 0;
				}

				.select {
					border-bottom: 2px solid #6EC9E1;
					color: #6EC9E1;
					font-weight: bold;
				}
			}

			.questionnaire {
				display: block !important;

				text {
					font-weight: bold;
					font-size: 18px;
				}

				view {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 30rpx;
					opacity: 0.6;
				}
			}

			.label {
				font-size: 13px;
				color: #6EC9E1;
			}

			.yijian {
				display: block !important;
				margin-top: 20rpx !important;
				width: 100%;

				.content {
					width: 100%;
					padding: 0 20rpx;

					span {
						display: inline-block;
						min-width: 50%;
						margin-top: 20rpx;
					}

					p {
						font-size: 14px;
						margin: 20rpx 0;
						color: #B2B2B2;
					}

					text {
						color: #666666;
					}

					image {
						height: 16px;
						width: 16px;
					}

					.c-i {
						display: flex;
						justify-content: space-between;
						align-items: center;
					}
				}
			}

			.from {
				padding: 0 30rpx !important;

				.item {
					width: 100%;
					margin-top: 20rpx;
					padding: 20rpx 0;
					border-top: 0.5rpx solid rgba(200, 200, 200, 0.2);
					font-size: 13px;
					font-weight: 550;
				}

				.z-s {
					padding: 20rpx 0;
					width: 100%;
				}

				.i-v {
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					width: 100%;
					line-height: 30px;

					span {
						margin-right: 20rpx;
						min-width: 60px;
						color: #999999;
						font-weight: 500 !important;
						width: auto;
					}

				}

				.i-f {
					flex-flow: column;
					align-items: flex-start;
				}
			}

			.card {
				.topic {
					font-size: 18px;
				}

				margin-top: 30rpx;
				background-color: #FFF;
				border-radius: 16rpx;
				padding:30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.notinfo {
				height: 100px;
				text-align: center;
				line-height: 100px;
			}

			.bto {
				background-color: #FFF;
				width: 100%;
				height: 60px;
				position: absolute;
				left: 0;
				bottom: 0;
				padding: 30rpx;
				// .button{
				// 	display: flex;
				// 	justify-content: flex-end;
				// 	align-items: center;
				// 	span{
				// 		border-radius: 30rpx;
				// 		border: 1rpx solid #8d8d8d;
				// 		padding: 0 20rpx;margin-left: 20rpx;
				// 		height: 30px;line-height: 30px;
				// 	}
				// }
			}

		}

		._img {
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			u-image {
				margin-right: 20rpx;
				margin-bottom: 16rpx;
				border-radius: 4px;
				border: 0.5rpx rgba(200, 200, 200, 0.2) solid;
			}
		}
	}
</style>